@import '../style/common.pcss';

.wrapper {
  &.first {
    position: relative;
    padding: 85px 0 15px;
    height: 100vh;
    color: #fff;
    background: #e35b8b url(../images/headbg.jpg) center center no-repeat;
    background-size: cover;
    &:before {
      content: '';
      position: absolute;
      bottom: 15px;
      left: 50%;
      transform: translate(-50%, 0);
      width: 45px;
      height: 45px;
      background: url(../images/scroll.gif) center center no-repeat;
    }
  }
}

.middle {
  width: 100%;
  height: 70%;
  margin: 15% 0;
  display: flex;
  flex-direction: column;
  .phone {
    flex: 1;
    width: 100%;
    height: 70%;
    background: url(../images/phone.png) top center no-repeat;
    background-size: contain;
  }

  .slogan {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
  }
}

.focus {
  background: url(../images/focus.png) center center no-repeat;
}

.global {
  background: url(../images/global.png) center center no-repeat;
}

.billboard {
  background: url(../images/billboard.png) center center no-repeat;
}

.custome {
  background: url(../images/custome.png) center center no-repeat;
}

.advertisement {
  background: url(../images/advertisement.png) center center no-repeat;
}

.security {
  background: url(../images/security.png) center center no-repeat;
}

.cooperation {
  padding: 70px 0;
  background: #fff;
  .container {
    flex-direction: column;
    padding: 0 10%;
    .title {
      font-size: 45px;
      margin: 0 0 50px;
    }
    .box {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      .cell {
        width: 20%;
        height: 80px;
        line-height: 100px;
        text-align: center;
        margin: 0 0 30px;
        padding: 0 3%;
        box-sizing: border-box;
        .cell-box {
          width: 100%;
          height: 100%;
          background-size: contain;
          background-position: center center;
          background-repeat: no-repeat;
          &.meiriyouxian {
            background-image: url(../images/cooperation/meiriyouxian.png);
          }
          &.vip {
            background-image: url(../images/cooperation/vip.png);
          }
          &.mogujie {
            background-image: url(../images/cooperation/mogujie.png);
          }
          &.xiaohongshu {
            background-image: url(../images/cooperation/xiaohongshu.png);
          }
          &.chuchujie {
            background-image: url(../images/cooperation/chuchujie.png);
          }
          &.jd {
            background-image: url(../images/cooperation/jd.png);
          }
          &.meitu {
            background-image: url(../images/cooperation/meitu.png);
          }
          &.dangdang {
            background-image: url(../images/cooperation/dangdang.png);
          }
          &.yangmatou {
            background-image: url(../images/cooperation/yangmatou.png);
          }
          &.douyin {
            background-image: url(../images/cooperation/douyin.png);
          }
        }
      }
    }
  }
}
